<template>
    <div class="dataList">
        <!-- 分页显示疫情数据 -->

        <!-- 上报按钮 -->
        <el-button @click='toAddPage'>上报</el-button>

         <!-- 表格 -->
      <el-table
      size='small'
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="80">
      </el-table-column>
      <el-table-column
        prop="country"
        label="国"
        width="80">
      </el-table-column>
      <el-table-column
        prop="province"
        label="省"
        width="100">
      </el-table-column>
        <el-table-column
        prop="city"
        label="市"
         width="100">
      </el-table-column>
      <el-table-column
        prop="area"
        label="区"
         width="100">
      </el-table-column>
      <el-table-column
        prop="confime"
        label="新增"
         width="100">
      </el-table-column>
      <el-table-column
        prop="suspend"
        label="疑似"
         width="100">
         <template v-slot="scope">
             <el-tag type='success'>{{scope.row.suspected}}</el-tag>
         </template>
      </el-table-column>
      <el-table-column
                prop="dead"
                label="死亡"
                width="80">
                <template v-slot="scope">
                    <el-tag type='info'>{{scope.row.dead}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="cure"
                label="治愈"
                width="80">
                <template v-slot="scope">
                    <el-tag type='warning'>{{scope.row.cure}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="severe"
                label="重症"
                width="80">
                <template v-slot="scope">
                    <el-tag type='danger'>{{scope.row.severe}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="outside"
                label="境外输入"
                width="80">
                <template v-slot="scope">
                    <el-tag>{{scope.row.outside}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="inputTime"
                label="输入时间"
                width='200'>
                <template v-slot='scope'>
                     {{scope.row.inputTime | dateFMT}}
                 </template> 
            </el-table-column>
    </el-table>


         <!-- 分页 -->
    <el-pagination
         background
         layout="prev, pager, next"
          :total="total"
          :current-page='params.page'
          @current-change='pageChange'>
    </el-pagination>



    </div>
</template>
<script>
import axios from '@/http/axios'
import moment from 'moment'
export default {
    data(){
        return{
            tableData:[],
            total:0,
            params:{
                page:1,
                pageSize:10
            }
        }
    },
     filters:{
        dateFMT(str){
            return moment(str).format('YYYY-MM-DD HH:mm:ss')
        }
    },
    created(){
        this.queryPage()
    },
    watch:{
        params:{
            handler:function(){
                            // 调用分页查询
                            this.queryPage()
            },
            deep:true
        }
    },
    
    methods:{
        pageChange(page){
                    // 当前点击的页码
                    this.params.page=page
                    // console.log(page)
         },
        toAddPage(){
            this.$router.push({
                path:'/dataList/dataAdd'
            })
        },
        queryPage(){
            axios({
                url:'http://121.199.29.84:8001/epidemic/pageQuery',
                method:'get',
                params:this.params,

            }).then((res)=>{
                // 分页的总条数
                this.total=res.data.data.total;
                // 表格数据
                this.tableData=res.data.data.list

            })
        }
    }
}
</script>